<template>
    <div>
        <div class="bgimg">
            <div class="title">轮播图片:</div>
            <div v-for="(item,index) in tempValue.arr" style="margin-top: 5px;display: flex;justify-content: space-between">
                <div>
                    <img style="width: 80px;height:80px;" :src="item.imgUrl"/>
                </div>
                <div>
                    <el-button type="primary" plain @click="editImgindexA(index)" v-if="item.bannerType" style="margin-top: 5px">编辑</el-button>
                    <el-button type="primary" plain @click="setUpImg(item,index)" v-if="!item.bannerType" style="margin-top: 5px">设置</el-button>
                    <el-button type="primary" plain @click="delImg(item,index)"  style="margin-top: 5px">删除</el-button>
                </div>
            </div>
            <el-button type="primary" @click="changebgimage" style="margin-top: 5px">新增轮播图片</el-button>
        </div>
        <div class="title">店招介绍:</div>
        <div>
            <el-input v-model="tempValue.storeDesc" type="textarea" :rows="2"></el-input>
        </div>
        <change-image ref="changeimg" albumType="store" imgnum="1" @returnPicture="getPicture"></change-image>
        <sel-file
                ref="selFile"
                @callback="selFileCallBack"
                imgNum="10"
                albumCode="store"
                dialogTitle="选择图片"
                selectType="checkbox"
                selMaxWidth="300px"
                selMaxHeight="300px"
        ></sel-file>
        <!-- Form -->
        <el-dialog title="设置banner图" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="banner图片" :label-width="formLabelWidth">
                    <div >
                        <img style="width: 80px;height:80px;" :src="form.imgUrl"/>
                    </div>
                </el-form-item>
                <el-form-item label="banner类型" :label-width="formLabelWidth">
                    <el-select v-model="form.bannerType" placeholder="请选择banner类型" @change="changeAcType()">
                        <el-option label="活动" value="1"></el-option>
                        <el-option label="商品" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="选择活动" :label-width="formLabelWidth" v-if="form.bannerType==1">
                    <el-select v-model="form.acobj" placeholder="请选择活动" value-key="id">
                        <div style="">
                            <div style="display: inline-block">
                                <el-input v-model="query.acTitle" placeholder="请输入活动名称" clearable></el-input>
                            </div>
                            <div style="display: inline-block">
                                <el-button type="primary" @click="searchBtn">搜索</el-button>
                            </div>
                        </div>
                        <el-option
                                v-for="item in acData"
                                :key="item.id"
                                :label="item.acTitle"
                                :value="item">
                        </el-option>
                        <div style="text-align:center">
                            <span class="text" v-show="selectPageAc!=1" @click.stop="prevePage">上一页</span>
                            <span class="text" style="padding-left: 30px;" @click.stop="nextPage" v-show="selectPageAc !=pageCountAc">
								下一页
							</span>
                        </div>

                    </el-select>
                </el-form-item>
                <el-form-item label="选择商品" :label-width="formLabelWidth" v-if="form.bannerType==2" >
                    <el-select v-model="form.goods" placeholder="请选择商品" value-key="id">
                        <div style="">
                            <div style="display: inline-block">
                                <el-input v-model="queryGoods.goodsName" placeholder="请输入活动名称" clearable></el-input>
                            </div>
                            <div style="display: inline-block">
                                <el-button type="primary" @click="searchBtnGs">搜索</el-button>
                            </div>
                        </div>
                        <el-option
                                v-for="item in GoodsData"
                                :key="item.id"
                                :label="item.goodsName"
                                :value="item">
                        </el-option>
                        <div style="text-align:center">
                            <span class="text" v-show="selectPageGs!=1" @click.stop="prevePageGs">上一页</span>
                            <span class="text" style="padding-left: 30px;" @click.stop="nextPageGs" v-show="selectPageGs !=pageCountGs">
								下一页
							</span>
                        </div>
                    </el-select>
                </el-form-item>
                <el-form-item label="商品图片" :label-width="formLabelWidth" v-if="setOrEdit==2 && form.bannerType==2">
                    <div >
                        <img style="width: 80px;height:80px;" :src="form.goods.goodsMainPhotoUrl"/>
                    </div>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="determineBtn(setOrEdit)">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import {mapState, mapGetters} from 'vuex';
    import {
        getSellerList,getInitStoreBanner
    } from "@/api/base/goods/seller/goods";
    import changeImage from '../../components/changeImage';
    import selFile from '@/components/file/selFile';
    //获取活动数据
    import {
        sellerActivityListAll
    } from "@/api/base/goods/seller/goods";
    export default {
        name: "qkStoreBannerAttr",
        props: {
            prop: {
                type: Object,
                default() {
                    return {
                        arr:[
                            {
                                imgUrl:'https://keytest.oss-cn-zhangjiakou.aliyuncs.com/upload/store/1191974507350003713/2020/04/d26e22bf81084b0eb8a32036e3b86497_968-380.jpg'
                            }
                        ],
                        storeDesc:"",
                        // picList:['https://keytest.oss-cn-zhangjiakou.aliyuncs.com/upload/store/1191974507350003713/2020/04/d26e22bf81084b0eb8a32036e3b86497_968-380.jpg','https://keytest.oss-cn-zhangjiakou.aliyuncs.com/upload/store/1191974507350003713/2020/04/d26e22bf81084b0eb8a32036e3b86497_968-380.jpg']

                    }
                },
            }
        },
        components: {
            selFile,
            changeImage
        },
        data() {
            return {
                setOrEdit:1,//1设置2编辑
                queryGoods:{
                    goodsStatus:0,
                    goodsName:''
                },
                query:{
                    acTitle:''
                },
                tempValue:{
                    arr:[
                        {
                            imgUrl:'https://keytest.oss-cn-zhangjiakou.aliyuncs.com/upload/store/1191974507350003713/2020/04/d26e22bf81084b0eb8a32036e3b86497_968-380.jpg'
                        }
                    ],
                    storeDesc:"",
                    // picList:['https://keytest.oss-cn-zhangjiakou.aliyuncs.com/upload/store/1191974507350003713/2020/04/d26e22bf81084b0eb8a32036e3b86497_968-380.jpg','https://keytest.oss-cn-zhangjiakou.aliyuncs.com/upload/store/1191974507350003713/2020/04/d26e22bf81084b0eb8a32036e3b86497_968-380.jpg']

                },
                dialogFormVisible: false,
                form: {
                    bannerType: '',
                    acobj:{},
                    goods:{},
                    imgUrl:'',
                    index:'',
                },
                acData:[],
                formLabelWidth: '120px',
                totalAc: null, // 获取总数据量
                pageCountAc: null, // 获取总页数
                selectPageAc: 1, // 当前页数
                size:10,
                GoodsData:[],
                totalGs: null, // 获取总数据量
                pageCountGs: null, // 获取总页数
                selectPageGs:1,

            }
        },
        methods:{
            update(){
                this.tempValue = JSON.parse(JSON.stringify(this.tempValue));
            },
            getPicture(e){
                    let obj={
                        imgUrl:e
                    }
                this.tempValue.arr.push(obj)
                this.update()
                // this.$store.commit("setQKStoreBannerList",this.tempValue.arr);
                console.log(this.tempValue.arr)
            },
            //删除banner
            delImg(img,index){
                this.tempValue.arr.splice(index,1)
                this.update()
                // this.$store.commit("setQKStoreBannerList",this.tempValue.arr)
            },
            //获取默认的banner图片
            getInitStoreBanner(){
                getInitStoreBanner().then(res=>{
                    if(res.data.code==200){
                        if(!this.tempValue.arr.bannerType){
                            this.tempValue.arr[0].imgUrl=res.data.data
                        }
                    }
                })
            },
            editImgindexA(index){
                this.setOrEdit=2
                this.form= {
                    bannerType: '',
                    acobj:{},
                    goods:{},
                    imgUrl:'',
                    index:'',
                }
                this.form=JSON.parse(JSON.stringify(this.tempValue.arr[index]))
                this.form.index=index
                if(this.form.bannerType==1){
                    this.getAcList(1,this.size,this.query)
                }else if(this.form.bannerType==2){
                    this.getGoodsList(1,this.size,this.queryGoods)
                }
                this.dialogFormVisible=true
                console.log(this.tempValue.arr)
            },
            determineBtn(val){
                this.dialogFormVisible = false
                this.tempValue.arr[this.form.index]=JSON.parse(JSON.stringify(this.form))
                console.log(this.form)
            },
            prevePage () {
                if (this.selectPageAc > 1) { // 判断点击的页数是否小于1
                    --this.selectPageAc  ;
                }
                //发送请求
                this.getAcList(this.selectPageAc ,this.size,this.query)
            },
            nextPage () {
                if (this.selectPageAc  < this.pageCountAc) { // 判断点击的页数是否小于总页数;
                    ++this.selectPageAc;
                    this.getAcList(this.selectPageAc ,this.size,this.query)
                }
            },
            prevePageGs () {
                if (this.selectPageGs > 1) { // 判断点击的页数是否小于1
                    --this.selectPageGs  ;
                }
                //发送请求
                this.getGoodsList(this.selectPageGs ,this.size,this.queryGoods)
            },
            nextPageGs () {
                if (this.selectPageGs  < this.pageCountGs) { // 判断点击的页数是否小于总页数;
                    ++this.selectPageGs;
                    this.getGoodsList(this.selectPageGs ,this.size,this.queryGoods)
                }
            },
            //点击搜索活动
            searchBtn(){
                if(this.query.acTitle==""){
                    this.$message({
                        message: '请输入活动名称',
                        type: 'error'
                    });
                }else{
                    this.selectPageAc=1
                    this.getAcList(this.selectPageAc,this.size,this.query)

                }
            },
            searchBtnGs(){
                if(this.queryGoods.goodsName==""){
                    this.getGoodsList(1,this.size,this.queryGoods)
                    // this.$message({
                    //     message: '请输入商品名称',
                    //     type: 'error'
                    // });
                }else{
                    this.selectPageGs=1
                    this.getGoodsList(this.selectPageGs ,this.size,this.queryGoods)

                }
            },
            //获取店内商品列表
            getGoodsList(page,size,queryGoods){
                getSellerList(page,size,queryGoods).then(res=>{
                    if(res.data.code==200){
                        this.GoodsData=res.data.data
                        this.totalGs = res.data.count; // 数据总数量
                        this.pageCountGs = Math.ceil(this.totalGs / 10);
                    }
                })
            },
            //获取活动列表
            getAcList(page,size,query){
                sellerActivityListAll(page,size,query).then(res=>{
                    if(res.data.code==200){
                        this.acData=res.data.data
                        this.totalAc = res.data.count; // 数据总数量
                        this.pageCountAc = Math.ceil(this.totalAc / 10);
                    }
                })
            },
            //点击banner类型
            changeAcType(){
                if(this.form.bannerType==1){
                    this.query={
                        acTitle:''
                    }
                    this.getAcList(1,this.size,this.query)
                }else{
                    this.queryGoods={
                            goodsStatus:0,
                            goodsName:''
                    }
                    this.getGoodsList(1,this.size,this.queryGoods)
                }
            },
            //点击设置
            setUpImg(item,index){
                this.getAcList(1,this.size,this.query)
                this.getGoodsList(1,this.size,this.queryGoods)
                console.log(this.tempValue.arr)
                this.setOrEdit=1
                this.form= {
                    bannerType: '',
                    acobj:{},
                    goods:{},
                    imgUrl:'',
                    index:'',
                }
                this.dialogFormVisible=true
                this.form.imgUrl=item.imgUrl
                this.form.index=index
        },
            changebgimage(){
                if(this.tempValue.arr.length<5){
                    this.$refs.changeimg.open();
                }else{
                    this.$message({message:"banner轮播最多上传5张",type:"error"});
                }
            },
            selFileCallBack(data) {
                this.tempValue.arr=[]
                data.forEach(item=>{
                    let obj={
                        imgUrl:item
                    }
                    this.tempValue.arr.push(obj)
                })
                this.update()
                // this.$store.commit("setQKStoreBannerList",this.tempValue.arr);
            },
        },
        mounted() {
            this.tempValue = this.prop;
        },
        watch: {
            prop(e){
                this.tempValue=e
            },
            tempValue: {
                handler(e){
                    this.$store.commit("updateActiveElementProp",e);
                },
                deep:true
            },
            deep:true
        }
    }
</script>

<style lang="scss" scoped>
    .bgimg{
        /*height:300px;*/
        display: flex;
        justify-content: space-around;
        flex-flow: column nowrap;
    }
    .arrt-eidt-wrapper{
        display: flex;
        .arrt-eidt-l{
            width: 108px;
        }
        .arrt-eidt-r{
            flex: 1;
        }
    }
    .title{
        vertical-align: middle;
        font-size: 14px;
        color: #606266;
        line-height: 40px;
        padding: 0 12px 0 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
</style>


